<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
var upColor = "#ec0000";
var upBorderColor = "#8A0000";
var downColor = "#00da3c";
var downBorderColor = "#008F28";

var dataCount = 2e5;

export default {
  name: "BarHistogram",
  props: {
    title: "",
    tableChoice: "",
    unit: "",
    universal: "",
  },
  data() {
    return {
      echartsList: [],
      isDownLoad: 0,
      list: [],
      decrementList: [],
      labelName: "",
      labelName1: "",
      dataColumn: [],
      dataColumn1: [],
      openColumn: [],
      openColumn1: [],
      worldMapContainer: {},
      dataArr: [],
      remarks: 1,
    };
  },
  mounted() {
    this.worldMapContainer = document.getElementById("main");
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
    this.remarks = this.$route.query.remarks;
    // consollog("universal", this.universal);
    this.data = this.generateOHLC(2e5);
  },
  created() {},
  methods: {
    resizeWorldMapContainer() {
      if (this.isDownLoad == 1) {
        this.worldMapContainer.style.width = "3840px";
        this.worldMapContainer.style.height = "2164px";
      } else {
        this.worldMapContainer.style.width = window.innerWidth - 270 + "px";
        this.worldMapContainer.style.height = window.innerHeight - 40 + "px";
      }
    },

    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL();
    },

    generateOHLC(count) {
      var data = [];

      var xValue = +new Date(2011, 0, 1);
      var minute = 60 * 1000;
      var baseValue = Math.random() * 12000;
      var boxVals = new Array(4);
      var dayRange = 12;

      for (var i = 0; i < count; i++) {
        baseValue = baseValue + Math.random() * 20 - 10;

        for (var j = 0; j < 4; j++) {
          boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
        }
        boxVals.sort();

        var idxRandom = Math.random();
        var openIdx = Math.round(Math.random() * 3);
        var closeIdx = Math.round(Math.random() * 2);
        if (closeIdx === openIdx) {
          closeIdx++;
        }
        var volumn = boxVals[3] * (1000 + Math.random() * 500);

        // ['open', 'close', 'lowest', 'highest', 'volumn']
        // [1, 4, 3, 2]
        data[i] = [
          echarts.format.formatTime("yyyy-MM-dd\nhh:mm:ss", (xValue += minute)),
          +boxVals[openIdx].toFixed(2), // open
          +boxVals[3].toFixed(2), // highest
          +boxVals[0].toFixed(2), // lowest
          +boxVals[closeIdx].toFixed(2), // close
          volumn.toFixed(0),
          getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4), // sign
        ];
      }

      this.data = data;
      this.drawLine();
      console.log("this.data", this.data);

      function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) {
        var sign;
        if (openVal > closeVal) {
          sign = -1;
        } else if (openVal < closeVal) {
          sign = 1;
        } else {
          sign =
            dataIndex > 0
              ? // If close === open, compare with close of last record
                data[dataIndex - 1][closeDimIdx] <= closeVal
                ? 1
                : -1
              : // No record of previous, set to be positive
                1;
        }
        // console.log("sign", sign);

        return sign;
      }
    },

    async drawLine() {
      let myChart = echarts.init(this.worldMapContainer);
      // let dataList = echartsList[0].dataList;
      // let xData = dataList.map((item) => item.create_time);
      // console.log("xData", xData);
      // let newData = [];
      // newData.length = dataList.length;
      // dataList.map((item, index) => {
      //   newData[index] = [
      //     item.closing_price,
      //     item.highset_price,
      //     item.minimum_price,
      //     item.opening_price,
      //   ];
      // });
      // console.log("dataList", dataList);
      // let barData = dataList.map((item) => item.the_position);
      // console.log("barData", barData);

      let option = {
        dataset: {
          source: this.data,
        },
        // title: {
        //   text: "Data Amount: " + echarts.format.addCommas(dataCount),
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: false,
            },
          },
        },
        grid: [
          {
            left: "10%",
            right: "10%",
            bottom: 200,
          },
          {
            left: "10%",
            right: "10%",
            height: 80,
            bottom: 80,
          },
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            inverse: true,
            axisLine: { onZero: false },
            splitLine: { show: false },
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "category",
            gridIndex: 1,
            boundaryGap: false,
            axisLine: { onZero: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            min: "dataMin",
            max: "dataMax",
          },
        ],
        yAxis: [
          {
            scale: true,
            splitArea: {
              show: true,
            },
          },
          {
            scale: true,
            gridIndex: 1,
            splitNumber: 2,
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
          },
        ],
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0, 1],
            start: 10,
            end: 100,
          },
          {
            show: true,
            xAxisIndex: [0, 1],
            type: "slider",
            bottom: 10,
            start: 10,
            end: 100,
          },
        ],
        visualMap: {
          show: false,
          seriesIndex: 1,
          dimension: 6,
          pieces: [
            {
              value: 1,
              color: upColor,
            },
            {
              value: -1,
              color: downColor,
            },
          ],
        },
        series: [
          {
            type: "candlestick",
            itemStyle: {
              color: upColor,
              color0: downColor,
              borderColor: upBorderColor,
              borderColor0: downBorderColor,
            },
            encode: {
              x: 0,
              y: [1, 4, 3, 2],
            },
          },
          {
            name: "Volumn",
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: "#7fbe9e",
            },
            large: true,
            encode: {
              x: 0,
              y: 5,
            },
          },
        ],
      };
      option.yAxis.name = "单位：" + this.unit;
      if (this.isDownLoad == 1) {
        option.yAxis.nameTextStyle = {
          fontSize: 60, //  字体大小
          lineHeight: 36,
          padding: [80, 15, 4, 0], //  内填充
        };
        option.xAxis.axisLabel = { fontSize: "90", lineHeight: 150 };
        option.yAxis.axisLabel = { fontSize: "90" };
        option.yAxis.axisLabel = { fontSize: "90" };
        option.legend.textStyle.fontSize = 60;
        option.legend.textStyle.fontWeight = 60;
        option.legend.itemHeight = 20;
        option.legend.itemWidth = 40;
        option.legend.icon = "rect";
        option.legend.top = 90;
        option.grid.top = 170;
        option.grid.right = 150;
        option.title.textStyle.fontSize = 90;
        option.title.textStyle.lineHeight = 90;
        option.tooltip.textStyle.fontSize = 90;
        option.series[0].label.fontSize = 90;
        option.series[1].label.fontSize = 90;
        option.series[2].label.fontSize = 90;
        option.series[3].label.fontSize = 90;
        option.series[4].label.fontSize = 90;
        option.series[5].label.fontSize = 90;
      }
      myChart.setOption(option);

      if (this.isDownLoad == 1) {
        const chartImgUrl = myChart.getDataURL({
          pixelRatio: 1,
          backgroundColor: "#fff",
          type: "png",
        });
        setTimeout(() => {
          this.downloadFile(chartImgUrl, this.title);
        }, 1000);
      }
    },
  },
};
</script>

<style scoped>
#main {
  width: 100%;
  height: 900px;
}
</style>
